<template>
  <div class="my">
    <div class="top"></div>
    <div class="chihuoka"></div>
    <div class="hongbao">
      <div class="hongbao-left"></div>
      <div class="hongbao-right"></div>
    </div>
    <div class="changyonggongju"></div>
    <div class="yaohaoyou">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scoped>
.yaohaoyou {
  width: 100%;
  height: 200px;
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;

  .left {
    width: 50%;
    height: 100%;
    background-color: antiquewhite;
    border-radius: 20px;
  }
  .right {
    width: 50%;
    border-radius: 20px;
    height: 100%;
    background-color: red;
  }
}
.my {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 80px;
    background-color: aqua;
  }

  .chihuoka {
    width: 100%;
    height: 70px;
    background-color: aqua;
    margin-top: 20px;
    border-radius: 15px;
  }

  .hongbao {
    width: 100%;
    height: 70px;
    background-color: pink;
    border-radius: 15px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .hongbao-left {
      width: 50%;
      height: 100%;
      border-radius: 15px;
      background-color: orange;
    }
    .hongbao-right {
      width: 50%;
      height: 100%;
      border-radius: 15px;
      background-color: red;
    }
  }
  .changyonggongju {
    width: 100%;
    height: 100px;
    background-color: aqua;
    margin-top: 20px;
    border-radius: 15px;
  }
}
</style>